<template>
  <!-- 注册页面 -->
  <el-main>
    <div style="text-align: center;font-size:24px;color:rgb(96,98,102) ;margin-top: 100px;">

      <span >汤臣一品便民服务中心 - 商品发布</span>
    </div>
    <el-row style="margin-top: 60px;margin-bottom: 100px;">
      <el-col :span="10" :offset="6">
        <el-form :model="putInInfo" status-icon :rules="rules" ref="putInInfo" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品信息" prop="secondHand.title">
            <el-input v-model="putInInfo.secondHand.title" clearable></el-input>
          </el-form-item>
          <el-form-item label="商品描述" prop="secondHand.introduce">
            <el-input v-model="putInInfo.secondHand.introduce" @blur="checksecondHandname()" clearable></el-input>
          </el-form-item>
          <el-form-item label="商品类别" prop="secondHand.type">
            <el-select  placeholder="请选择商品类型"  v-model="putInInfo.secondHand.type" filterable  @change="changeGame">
              <el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="secondHand.phone">
            <el-input v-model.number="putInInfo.secondHand.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="secondHand.price">
            <el-input v-model.number="putInInfo.secondHand.price" type="number" clearable></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="secondHand.store">
            <el-input v-model.number="putInInfo.secondHand.store" type="number" clearable></el-input>
          </el-form-item>

            <el-form-item label="图片" prop="merchant.charter">
              <el-upload
                name="files"
                class="upload-demo"
                multiple
                action="http://localhost:8080/oos/upload/img/secondhand"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :limit="3"
                :on-exceed="handleExceed"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1mb</div>
              </el-upload>
            </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="putIn()">商品提交</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </el-main>
</template>

<script>
  export default {
    data() {
      return {
        /* 注册信息，一同传给后端 */
        putInInfo: {
          secondHand:{
              phone:"",
              title:"",
              introduce:"",
              price: '',
              photos:"",
              type: "",
              store:""
          }
        },
        rules: {
          "secondHand.phone": [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { type: 'number', message: '电话只能由数字组成'}
          ],
          "secondHand.title": [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          "secondHand.introduce": [
            { required: true, message: '请输入商品介绍', trigger: 'blur' },
            { min: 10, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur' }
          ],
          "secondHand.price": [
            { required: true, message: '请输入商品价格', trigger: 'blur' },
          ],
          "secondHand.store": [
            { required: true, message: '请输入商品的数量', trigger: 'blur' },
          ],
          "secondHand.photos": [
            { required: true, message: '请上传商品照片', trigger: 'blur' },
          ],
          "secondHand.type":
           { required: true, message: '请选择类别', trigger: 'blur' },
        },
        types:[]
      }
    },
    methods: {
      putIn: function(){


        //使用element ui自带的验证规则，如果未通过，返回不执行
        let flag = true;
        this.$refs['putInInfo'].validate((valid) => {
          if (!valid) {
            flag = false;
          }
        });
        if(!flag){
          return;
        }

        /* 手机号格式检查 */
        if(this.putInInfo.secondHand.phone.toString().length != 11){
          this.$message.error("请检查手机号格式后重试")
          return;
        }

        console.log(this.putInInfo.secondHand);
        this.$axios.post("http://localhost:8080/second/addSecondHand/" ,this.putInInfo.secondHand).then(res => {
          if(res.data.status= "SUCCESS"){
            this.$message.success("添加成功，请耐心等待后台审核")
            this.$router.push("/account/mySecondHand")
          }else{
           this.$message.error("添加失败")
          }
        })


      },
      sendCode: function(){


        /* 手机号格式检查 */
        if(this.putInInfo.secondHand.phone.toString().length != 11){
          this.$message.error("请检查手机号格式后重试")
          return;
        }

      },
      /* 删除上传图片的事件 */
      handleRemove: function(file){
        // 将已有的图片列表转换为字符串
        let photos = this.putInInfo.secondHand.photos.split(',')
        // 找到被删除图片的索引位置切割掉
        photos.splice(photos.indexOf(file.response.data[0]), 1)
        // 将数组转成字符串赋值给编辑内容
        this.putInInfo.secondHand.photos = photos.join()
       console.log(this.putInInfo.secondHand.photos);
      },
      /* 图片上传成功的事件 */
      handleSuccess: function(response){
        let photos
        if(this.putInInfo.secondHand.photos == ""){
          // 如果当前数组列表为空，新建一个空数组，否则空字符串也会被当成一个元素
          photos = []
        }else{
          // 如果当前数组列表不为空，将已有的图片切割为数组
          photos =  this.putInInfo.secondHand.photos.split(',')
        }
        //将图片url保存到数组
        photos.push(response.data[0])
        //将数组转换为字符串赋值给编辑内容
         this.putInInfo.secondHand.photos = photos.join()
        console.log("ssss"+this.putInInfo.secondHand.photos);


      },
      handleExceed:function(){
        this.$message.error("超过图片的最大数量")
      },

      //解决下拉框选中不了问题
      changeGame:function(id){
        this.$forceUpdate()
      }


    },
    mounted() {
      /* 设置页面标题 */
      document.title="商品发布 - 汤臣一品便民服务中心"
      //查询商品类别
      this.$axios.get("http://localhost:8080/second/findKind/" ).then(res => {
          if(res.data.status= "SUCCESS"){
            this.types=res.data.data
            console.log(res.data.data);
          }else{
           this.$message.error("类别查找失败")
          }
        })
    }
  }
</script>

<style scoped>

</style>
